<template>
	<view class="headerTop">
		<div class="logo">量化交易</div>
		<div class="right">
			<el-menu
				:default-active="activeIndex"
				class="el-menu-demo"
				mode="horizontal"
				@select="handleSelect"
				background-color="#545c64"
				text-color="#fff"
				active-text-color="#ffd04b"
			>
				<el-menu-item index="1">量化首页</el-menu-item>
				<el-menu-item index="2">策略推荐</el-menu-item>
				<el-menu-item index="3">策略研究</el-menu-item>
				<el-menu-item index="4" @click="dialogFormVisible1 = true" v-if="!isLogin">登录</el-menu-item>
				<el-menu-item index="5" @click="dialogFormVisible2 = true" v-if="!isLogin">注册</el-menu-item>
			</el-menu>
			<!-- 登录头像 -->
			<div class="users" v-if="isLogin" @click="esc">
				<div class="userImg">{{ un[0] }}</div>
				<div class="userName">{{ un }}</div>
			</div>
		</div>

		<el-dialog title="请登录" :visible.sync="dialogFormVisible1" width="480px">
			<el-form :model="form1">
				<el-form-item label="请输入用户名" :label-width="formLabelWidth"><el-input v-model="form1.userName" autocomplete="off"></el-input></el-form-item>
				<el-form-item label="请输入密码" :label-width="formLabelWidth"><el-input type="password" v-model="form1.passWord" autocomplete="off"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="login">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="请注册" :visible.sync="dialogFormVisible2" width="480px">
			<el-form :model="form2">
				<el-form-item label="请输入用户名" :label-width="formLabelWidth"><el-input v-model="form2.userName" autocomplete="off"></el-input></el-form-item>
				<el-form-item label="请输入密码" :label-width="formLabelWidth"><el-input type="password" v-model="form2.passWord" autocomplete="off"></el-input></el-form-item>
				<el-form-item label="请重复密码" :label-width="formLabelWidth"><el-input type="password" v-model="form2.repeat" autocomplete="off"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="register">确 定</el-button>
			</div>
		</el-dialog>
	</view>
</template>

<script>
// 引入接口
import { regiseter_api, login_api } from '../../api/api.js';
export default {
	name: 'headerTop',
	data() {
		return {
			isLogin: false,
			un: '',
			activeIndex: '1',
			dialogFormVisible1: false,
			dialogFormVisible2: false,
			formLabelWidth: '100px',
			form1: {
				userName: '',
				passWord: ''
			},
			form2: {
				userName: '',
				passWord: '',
				repeat: ''
			}
		};
	},
	beforeMount() {
		let userName = localStorage.un;
		if (userName.length != 0) {
			this.isLogin = true;
		}
		this.un = userName;
	},
	methods: {
		handleSelect(key, keyPath) {
			console.log(key);
			if (!this.isLogin && key != 5) {
				this.dialogFormVisible1 = true;
				return;
			}
			this.$store.state.showIndex = key;
		},
		esc() {
			this.$alert('是否退出登录？', '注意！！！', {
				confirmButtonText: '确定',
				callback: action => {
					if (action == 'cancel') {
						return;
					}
					this.isLogin = false;
					this.un = '';
					localStorage.un = '';
					this.$message({
						type: 'info',
						message: '已退出登录'
					});
				}
			});
		},
		// 登录方法
		async login() {
			let res = await login_api(this.form1);
			if (res.code) {
				this.$message({
					showClose: true,
					type: 'success',
					message: res.msg
				});
				this.dialogFormVisible1 = false;
				this.isLogin = true;
				this.un = localStorage.un;
			} else {
				this.$message.error(res.msg);
				this.form1 = {
					userName: '',
					passWord: ''
				};
			}
		},
		// 注册
		async register() {
			// 输入框不能为空
			if (this.form2.userName.length == 0 || this.form2.passWord.length == 0) {
				this.$message({
					showClose: true,
					message: '输入框不能为空',
					type: 'warning'
				});
				return;
			}
			// 两次输入的密码是否一致
			if (this.form2.passWord != this.form2.repeat) {
				this.$message.error('两次密码输入不一致！');
				this.form2 = {
					userName: this.form2.userName,
					passWord: '',
					repeat: ''
				};
				return;
			}
			// 调用注册接口 开始注册
			let res = await regiseter_api(this.form2);
			
			// 判断是否注册成功
			if (res.code) {
				this.$message({
					showClose: true,
					type: 'success',
					message: res.msg
				});
				this.dialogFormVisible2 = false;
			} else {
				this.$message({
					showClose: true,
					message: res.msg,
					type: 'warning'
				});
			}
			this.form2 = {
				userName: '',
				passWord: '',
				repeat: ''
			};
		}
	},
	watch: {
		dialogFormVisible1: function() {
			this.form1 = {
				userName: '',
				passWord: ''
			};
		},
		dialogFormVisible2: function() {
			this.form2 = {
				userName: '',
				passWord: '',
				repeat: ''
			};
		}
	}
};
</script>

<style lang="less">
.headerTop {
	width: 100%;
	height: 61px;
	background-color: #545c64;
	display: flex;
	justify-content: space-between;

	.logo {
		width: 15vw;
		line-height: 60px;
		color: #fff;
		font-size: 24px;
		text-align: center;
		font-weight: bold;
	}

	.el-menu {
		display: inline-block;
		vertical-align: top;
		margin-right: 20px;
	}
	.users {
		display: inline-block;
		vertical-align: top;
		font-size: 0px;
		div {
			display: inline-block;
			height: 100%;
			line-height: 60px;
		}
		.userImg {
			width: 50px;
			height: 50px;
			vertical-align: top;
			background-color: #909399;
			border-radius: 50%;
			margin-top: 5px;
			text-align: center;
			line-height: 50px;
			font-size: 24px;
			color: #fff;
		}
		.userName {
			line-height: 60px;
			font-size: 16px;
			margin-left: 10px;
			margin-right: 20px;
			color: #fff;
		}
	}
}
</style>
